<template>
  <div class="">
    <div class="body">
      <div class="body-content">
        <el-card class="box-card">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="最新收到的赞" name="1">
              <ul v-if="praiseMes.length>0" class="box-ul">
                <li
                  v-for="(pmItem,pmIndex) in praiseMes"
                  :key="pmIndex"
                  @mouseenter="hoverCIndex = pmIndex"
                  @mouseleave="hoverCIndex = -1"
                  class="praise-li">
                  <div class="praise-li-dv">
                    <div class="praise-li-detail">
                      <i class="iconfont icon-dian" :class="pmItem.isCheck==0?'red':'Clear'"></i>
                      <!-- <img :src="'data:image/jpeg;base64,'+pmItem.avatar" alt="" class="praise-li-avatar"> -->
                      <img :src="pmItem.avatar" alt="" class="praise-li-avatar">
                      <div class="praise-li-praiseTime">
                        <div class="praise-li-nicknamePra">
                          <h3 class="plnpra-nickname" :title="pmItem.Introduction">{{pmItem.nickname}} </h3>
                          <span>赞了我的评论</span>
                        </div>
                        <div class="praise-li-operate">
                          <span>{{fileType.changeTime(pmItem.praiseme_time)}}</span>
                          <span class="cancelPraise" :class="{'link-item-hover':hoverCIndex == pmIndex}" @click="delPraise(pmItem.mes_id)"><i class="iconfont icon-shanchu"></i>删除该通知</span>
                        </div>
                      </div>
                    </div>
                    <span>{{pmItem.topic_type}}</span>
                  <span :title="pmItem.content" class="praise-li-review" @click="go(pmItem.topic_id,pmItem.topic_type,pmItem.praiseMeId,'praise')">{{pmItem.content}}</span>
                  </div>
                  <el-divider></el-divider>
                </li>
              </ul>
              <div v-else class="kong"><i class="iconfont icon-meiyoushuju"></i>还没有人点赞你的评论，快去跟大家互动吧</div>
            </el-collapse-item>
            <el-collapse-item title="回复我的" name="2">
              <ul v-if="replyMes.length>0"  class="box-ul">
                <li
                  v-for="(rmItem,rmIndex) in replyMes"
                  :key="rmItem.reId"
                  @mouseenter="hoverRIndex = rmIndex"
                  @mouseleave="hoverRIndex = -1"
                  class="praise-li">
                  <div class="praise-li-dv">
                    <div class="praise-li-detail">
                      <i class="iconfont icon-dian" :class="rmItem.replyIsCheck==0?'red':'Clear'"></i>
                      <!-- <img :src="'data:image/jpeg;base64,'+rmItem.avatar" alt="" class="praise-li-avatar"> -->
                      <img :src="rmItem.avatar" alt="" class="praise-li-avatar">
                      <div class="praise-li-xiangqing">
                        <div class="praise-li-nicheng">
                          <h3 class="plnpra-nickname" :title="rmItem.Introduction">{{rmItem.nickname}}</h3>
                          <span>回复了我的评论</span>
                        </div>
                        <span>{{rmItem.repContent}}</span>
                        <div class="praise-li-operate">
                          <span>{{fileType.changeTime(rmItem.time)}}</span>
                          <span><i class="iconfont icon-huifu"></i>回复</span>
                          <span><i class="iconfont icon-dianzan"></i>点赞</span>
                          <span class="cancelPraise" :class="{'link-item-hover':hoverRIndex == rmIndex}" @click="delReply(rmItem.reId)"><i class="iconfont icon-shanchu"></i>删除该通知</span>
                          <!-- <span>这是测试内容合唱比赛科班出身充不上电成都市口</span> -->
                        </div>
                      </div>
                    </div>
                    <div class="praise-li-content" @click="go(rmItem.topic_id,rmItem.topic_type,rmItem.reId,'reply')">
                      <span>{{rmItem.content}}</span>
                  </div>
                  </div>
                  <el-divider></el-divider>
                </li>
              </ul>
              <div v-else class="kong">还没有人回复，快去留言看看(u‿ฺu✿ฺ)</div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        praiseMes:[],
        replyMes:[],
        activeName: '1',
        hoverCIndex:-1,
        isLogin:'',
        user_id:'',
        hoverRIndex:-1,
      }
    },
    mounted(){
      this.isLogin = this.$store.getters.getShow;
        if(this.isLogin){ //判断是否登录
          this.user_id = this.$store.getters.getUser.user_id;
        }
      this.getPraiseDetails(this.user_id);
      this.getReplyDeatils(this.user_id);
    },
    methods: {
      // 查询被点赞情况
      async getPraiseDetails(user_id){
        let variate = user_id;
        const {data:res} = await this.$http.post("selPraisemeMes",{variate});
        console.log(res);
        if(res.status != 200){
          this.$message.error('查询失败');
        }else{
          this.praiseMes = res.message;
        }
      },
      go(id,type,mesId,mesType){
        console.log(id);
        console.log(type);
        console.log(mesId);
        switch(type){
          case "留言":
            // alert("留言板");
            this.$router.push("/messageBoard");
            break;
          case "详情":
            // alert("详情");
            // this.$router.push("/details",{id:id});
             this.$router.push({path:'/details',query:{id:id}})
            break;
          case "友链":
            // alert("友链");
            this.$router.push("/interlinkage");
            break;
          case "书单":
            // alert("书单");
            this.$router.push("/booklist");
            break;
          case "关于":
            // alert("关于");
            this.$router.push("/about");
            break;
          case "搜索":
            // alert("搜索");
            this.$router.push("/search");
            break;
           default :
            alert("你的信息有误");
            break;

        }
        this.clearRed(mesId,mesType);
      },
      // 已查看
      async clearRed(mesId,mesType){
        console.log(mesId);
        console.log(mesType);
        let variate = mesId;
        if(mesType=="praise"){
          const {data:praiseRes} = await this.$http.post("updatePraiseMeIsCheck",{variate});
          console.log(praiseRes);
        }else if(mesType=="reply"){
          const {data:replyRes} = await this.$http.post("updateReplyMeIsCheck",{variate});
          console.log(replyRes);
        }
      },
      async getReplyDeatils(user_id){
        let variate = user_id;
        const {data:res} = await this.$http.post("selectReplymessage",{variate});
        console.log(res);
        if(res.status != 200){
          this.$message.error('查询失败');
        }else{
          this.replyMes = res.message;
          // let img = 'data:image/jpeg;base64,'+this.replyMes.avatar;
          // this.message.avatar = img.replace(' ', '+')
          // console.log(this.replyMes.avatar);
        }
      },
      // 删除被点赞
      async delPraise(id){
        console.log(id);
      },
      async delReply(id){
        console.log(id);
      },
    }
  }
</script>
<style scoped>
@import url('./css/person.css');
</style>
